<template>
  <a-modal
    :width="500"
    :visible="visible"
    @cancel="onClose"
    ok-text="确定"
    :destroyOnClose="true"
  >
    <template #title>
      <span>设置佣金模板</span>
      <a-button
        type="link"
        style="margin-left: 10px"
        @click="addTemplate"
        v-if="!$store.getters.isMobile"
        >前往添加模板</a-button
      >
    </template>
    <a-alert type="warning" style="margin-bottom: 20px">
      <template #description>
        <p>
          一旦设置模板，将在下次结算日使用该模板给该团队所有招商专员进行提成计算。
        </p>
      </template>
    </a-alert>
    <a-form>
      <a-row :wrap="true" :gutter="12">
        <a-col :span="24">
          <a-form-item label="选择佣金模板" v-bind="validateInfos.template_id">
            <a-select
              v-model:value="formData.template_id"
              :options="commissionOptions"
              placeholder="请选择佣金模板"
              :allowClear="true"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <template #footer>
      <a-row type="flex" align="middle" justify="center">
        <a-col :flex="1" style="text-align: left">
          <a-checkbox v-model:checked="isAgree"
            >勾选，代表确定知晓操作带来的影响。</a-checkbox
          >
        </a-col>
        <a-col>
          <a-button @click="onClose">取消</a-button>
          <a-button
            :disabled="!isAgree"
            type="primary"
            :loading="saveLoading"
            @click="onSubmit"
            >确定</a-button
          >
        </a-col>
      </a-row>
    </template>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch, ref } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";
import { SyncOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const useForm = Form.useForm;
export default defineComponent({
  name: "SetCommissionTemplate",
  props: {
    id: {
      type: [Number, String],
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    templateId: {
      type: [Number, String],
      default: 0,
    },
    from: {
      type: Number,
      default: 0, //1代表渠道 0代表团队
    },
  },
  components: { SyncOutlined },
  setup(props, { emit }) {
    const state = reactive({
      saveLoading: false,
      isAgree: false,
    });

    const formData = reactive({
      template_id: undefined,
    });
    const ruleRef = reactive({
      template_id: [{ required: true, message: "必选" }],
    });

    const { resetFields, validate, validateInfos } = useForm(formData, ruleRef);

    const onSubmit = () => {
      validate().then(() => {
        let params = {
          id: props.id,
        };
        for (let key in formData) {
          if (formData[key] || formData[key] === 0) {
            params[key] = formData[key];
          }
        }
        state.saveLoading = true;

        let url = "/business/customerTeam/setTemplate";
        if (props.from == 1) {
          url = "/business/customer/channel/setTemplate";
        }

        request
          .post("/org", url, params)
          .then((res) => {
            message.success(res.msg || "设置成功!");
            emit("success");
          })
          .finally(() => {
            state.saveLoading = false;
          });
      });
    };

    const $router = useRouter();
    const addTemplate = () => {
      emit("handleCancel");
      $router.push({ name: "commissionList" });
    };

    const commissionOptions = ref([]);
    const getCommissionList = () => {
      request.get("/org", "/business/customer/commissionIndex").then((res) => {
        console.log(res);
        commissionOptions.value = res?.data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        formData.template_id = props?.templateId || undefined;
      });
    };

    const onClose = () => {
      emit("handleCancel");
    };

    const init = () => {
      getCommissionList();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
          state.saveLoading = false;
          state.isAgree = false;
        }
      }
    );

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      onClose,
      onSubmit,
      addTemplate,
      commissionOptions,
    };
  },
});
</script>

<style lang="less" scoped>
p {
  &:last-of-type {
    margin-bottom: 0;
  }
}
.user-tag :deep(.ant-tag) {
  border-radius: 20px !important;
  padding: 0 12px 0 0 !important;
  background: #f1f1f1;
  border: none;
}
:deep(.ant-alert-description) {
  font-size: 12px;
  p {
    margin-bottom: 6px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
:deep(.ant-alert-with-description.ant-alert-no-icon) {
  padding: 6px 10px;
}
</style>
